<template>
  <div class='wy-main matching-tendering wei_tendering'>
    <a-row class="wy-main-title" v-if="!detail">
      <a-col :span="24">
        <p class="title-p">
          <a-divider class="title-vertical" type="vertical" />
          <span class="title-span">发布网点信息</span>
          <a-divider class="title-divider" />
        </p>
      </a-col>
    </a-row>
    <div class="list_tab">
      <a-form :form="form" @submit="handleSubmit" class="wy-form">
        <a-form-item v-bind="formItemLayout" label="仓储名称">
          <a-input :disabled="disabled" v-decorator="[ 'company', { rules: [ {required: true, message: '网点名称不能为空！',}]}]" placeholder='请输入网点名称'   />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="仓储面积">
          <a-input :disabled="disabled"  v-decorator="[ 'companwy', { rules: [ {required: true, message: '网点面积不能为空！',}]}]" placeholder='请输入网点面积'   />
		  <b style="margin-left: 10px">平方米</b>
        </a-form-item>
		<a-form-item v-bind="formItemLayout" label="出租价格">
          <a-input :disabled="disabled" v-decorator="[ 'contentOriginq',{rules:[{required: true,message: '出租价格不能为空'}]}]" placeholder='请输入出租价格'   />
		  <b style="margin-left: 10px">元/天/m2</b>
        </a-form-item>
      	<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="仓储类型" style="margin-top:-12px;margin-bottom: 14px !important;">
				<a-radio-group  :disabled='disabled' v-decorator="['type', {rules: [{ required: true, message: '请选择仓储类型!' }]}]">
					<a-radio value="0">
					  常温仓
					</a-radio>
					<a-radio value="1">
					  无人仓
					</a-radio>
          <a-radio value="2">
					  冻库
					</a-radio>
				</a-radio-group>
			</a-form-item>
        <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="仓储地址">
        <a-input  :disabled='disabled' @click="departureShowMap" v-decorator="[ 'producePlace', {rules: [{ required: true, message: '请选择网点地址!' }]}]" placeholder='请选择网点地址' ref="userNameInput">
          <a-icon type="environment" slot="suffix" style="color: #15837A;" />
        </a-input>
      </a-form-item>
	    <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="仓储照片" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload v-decorator="[ 'upload1',{rules: [{ required: true, message: '请上仓储照片!' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
              <div class="img_zz" v-if="Driver_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
              <div class="up_img_d" v-if="!Driver_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;">*必填：</span>仓储照片 
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>
	    <a-form-item v-bind="formItemLayout" label="联系人">
          <a-input :disabled="disabled" v-decorator="[ 'companyw', { rules: [ {required: true, message: '联系人姓名不能为空！',}]}]" placeholder='请输入联系人姓名'   />
        </a-form-item>
		<a-form-item v-bind="formItemLayout" label="联系电话">
          <a-input :disabled="disabled" v-decorator="[ 'companye', { rules: [ {required: true, message: '联系人手机号不能为空！',}]}]" placeholder='请输入联系人手机号'   />
        </a-form-item>

        <!-- <a-form-item v-bind="formItemLayout" label="工作年限">
          <a-input :disabled="disabled" v-decorator="[ 'contentOrigintiao',{rules:[{required: true,message: '工作年限不能为空'}]}]" placeholder='请输入工作年限'   />
          <b style="margin-left: 10px">年</b>
        </a-form-item> -->
        <!-- <a-form-item label="擅长领域" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
			<div class="expert-label">
				<span  :class="i.class" v-for="(i,index) in Label_list" :key="index" @click="Label_chenge(index)" :disabled='disabled'>
						{{i.name}}
				</span>
			</div>
			<a-textarea  maxlength="40" :disabled='disabled' placeholder="请填写备注" v-model="description" style="margin-top: 10px; width: 447px;height:173px;" :rows="4"  />
		</a-form-item> -->
        <!-- <a-form-item v-bind="formItemLayout" label="提供服务">
            <a-select :disabled="disabled" style="width:280px"  v-decorator="[ 'contentType', { rules: [ {required: true, message: '新闻类型不能为空！',}]}]" >
              <a-select-option key="1" :value="1">约谈</a-select-option>
              <a-select-option key="2" :value="2" >电话访谈</a-select-option>
            </a-select>
        </a-form-item> -->
        <!-- <a-form-item v-bind="formItemLayout" label="发布者">
          <a-input  disabled  v-model="admin1" />
        </a-form-item> -->
        <a-form-item v-bind="formItemLayout" label="仓储简介">
          <a-textarea  :disabled="disabled" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6 }" v-decorator="[ 'contentLabel', { rules: [ {required: true, message: '网点不能为空！',}]}]"   placeholder='请介绍一下园区详情（500字以内）'/>
        </a-form-item>
          <a-form-item v-bind="formItemLayout" label="有效期">
          <a-input :disabled="disabled" v-decorator="[ 'companywe', { rules: [ {required: true, message: '联系人姓名不能为空！',}]}]" placeholder='请输入联系人姓名'   /> <b style="margin-left: 10px">（天）</b>
        </a-form-item>



    
          <div class="ant-row ant-form-item" v-if="!detail||type!='add'">
            <div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-checkbox v-model="agreement" >
								我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
							</a-checkbox>
						</span>
					</div>
				</div>
			</div>

	  <div class="ant-row ant-form-item" v-if='types!="add"'>
			<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" :disabled = '!agreement' html-type="submit" style="width: 300px;height:50px;margin-top: -10px;" >
								{{types == 'add' ? '关闭':'提交审核并发布'}}
							</a-button>
						</span>
					</div>
				</div>
            
        </div>
      </a-form>
    </div>
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" ></map-svg>
   	  <a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
	  </a-modal>
	  <a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
	  </a-modal>
  </div>
</template>
<script>
  // import E from 'wangeditor'
  import { environment } from '@/environments/environment'
  import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
  import {mapState, mapGetters,mapMutations} from 'vuex'
  import MapSvg from '@/components/dialog/MapSvg'
  import Web from '@/components/tool/web'
  import User from '@/components/tool/user'
  //  const editor = new E('#editorElem')

  export default {
    // name: 'editor',
    props: ['type','detail',"isSee"],
    data() {
      return {
		agreement:false,
	    webShow:false,
        userShow:false,
        uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
        FileUploadUrl2:environment.FileUploadUrl2,
        upload1:'',
        disabled:false,
        contentCode:1,
        approvalStatus:106,
        Driver_img:'',
        coverPic:'',
        coverPath:'',
        loading: false,
        disabled:false,
        vipp:1,
        admin1:'',
        fileList: [],
        // 地图存起止数据
        departureData: {},
        description: '',//备注
        Label_list: [{
						name: '物流大数据',
						class: ''
					},
					{
						name: '物流金融',
						class: ''
					},
					{
						name: '仓储管理',
						class: ''
					},
					{
						name: '整体解决方案',
						class: ''
					}
				],
        contentTxt: '',
        // contentxxx:'',
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 4
            },
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 20
            },
          },
        },
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
        this.admin1 = this.$store.state.account.user.username;
        if(this.isSee){
          this.disabled = true
        }else{
          this.disabled = false
        }

        if(this.detail){
           console.log(this.detail)
          let d = this.detail
          if(d.coverPath){
             this.Driver_img = this.FileUploadUrl2+d.coverPath+d.coverPic
             this.upload1 = true
          }
          var tontext = d.contentTxt.replace(/<.*?>/g,"");
      
           setTimeout(() => {
          this.form.setFieldsValue({
            contentType:d.contentType,
            contentTitle:d.contentTitle,
            // contentLabel:d.contentLabel,
            contentOrigin:d.contentOrigin,
            upload1:this.upload1==true?true:false,
            // coverPath:d.coverPath,
            // coverPic:d.coverPic,
            // vipp:d.vipp,
            // contentxxx:tontext,


          })
          }, 100);
        }
    },
    components: {
        MapSvg,
		Web,
		User

    },
    watch: {

    },

    mounted: function() {
     

    },
    computed:{
      ...mapState(['setUser'])
    },
    methods: {
	   close() {
			this.webShow = false
			this.userShow = false

		},
        // 选择标签
		Label_chenge(index) {
				if(this.isSee){
				return false
				}
				for(var i in this.Label_list) {
					if(i == index) {
						if(!this.Label_list[i].class) {
							this.Label_list[i].class = 'active'
							this.description += this.Label_list[i].name+'，'
						} else {
							this.Label_list[i].class = ''
							this.description = this.description.split(this.Label_list[i].name+'，').join("");
						}
					}
				}
			},
      // 字典表接口 
      getCommonDict (nameList,type) {
        this.$get('/info/commonDict', {
          dictType: type,
                pageSize: 99,
                pageIndex: 1
        }).then((r) => {
          this[nameList] = r.data.data.rows;
        }).catch((e) => {
        })
      },
      reset(){

        this.form.resetFields();
        this.contentTxt='';
        this.Driver_img = '';
        this.coverPic='';
        this.coverPath='';
        var content = editor.txt.html(this.contentTxt);
        editor.txt.html(content);
      
      },
      onChange(e){
        this.vipp = e.target.value;
      },
   
      // 附件
      handleChange(info) {
        this.fileList = info.fileList
        if(info.file.status === 'uploading') {
          return
        }
        let arr = []
        if(info.file.status === 'done') {
          this.loading = false
          // 每个货物的多个图片拼成字符串，按,分割
          let urls = [];
          for (var i=0;i<info.fileList.length;i++){
            arr.push({
              name: info.fileList[i].name,
              path: info.fileList[i].url?info.fileList[i].url:info.fileList[i].response.data.certifJpgFile
            })
          }
        }
        this.imgArray = arr;
      },
      Driver_Change(info){

        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.coverPic = info.file.response.data.certificatesjpg// 驾驶员照片
          this.coverPath= info.file.response.data.certificatesPath// 驾驶员照片目录 
          this.loading = false
        }
      },
    /* 省市地图代码 start */
      // 省市地图回调
      mapSvgCall(d) {
        if(d.name === 'departure') {
          this.form.setFieldsValue({
            producePlace : d.provCityArea
          });
          this.departureData = Object.assign({}, d);
        }
      },
      departureShowMap() {
        this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
      },



            // 上传证件
      beforeUpload(file) {

        const isJPG = file.type === 'image/jpeg' || 'image/png'
        if(!isJPG) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if(!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
      },
      //认证提交
      handleSubmit(e) {
        
        
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
         
          values.contentTxt = this.contentTxt
          values.coverPath = this.coverPath
          values.coverPic = this.coverPic
          // values.vipp = this.vipp
          values.contentCode = this.contentCode
           if(this.detail){
            values.contentId = this.detail.contentId
          }

          if(!err) {
              if(this.type =='edit'){
                values.approvalStatus = this.approvalStatus
                this.$put('content/content', values,true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  // this.form.resetFields();
                  this.$emit('handleCancel');
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })
              }else{
              this.$post('content/content', values,true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  // this.form.resetFields();
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })
              }

            }

        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .matching-tendering {
    .list_tab {
      margin-top: 10px;
    }
  }
  .expert-label{
    span{
    border: 1px solid #15837A;
    width: 100px;
    height: 40px;
    border-radius: 2px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 20px;

    }

 
  }
</style>